<template>
  <div>
    <el-form-item label="部门范围" class="tr">
      <el-switch v-model="value.__config.deptRange"> </el-switch>
    </el-form-item>
    <el-form-item v-if="value.__config.deptRange" class="tr">
      <el-select
        v-model="value.__config.deptSelected"
        placeholder="请选择部门"
        clearable
        @change="handleChange"
        size="small"
        class="mb10"
        style="width: 100%"
      >
        <el-option
          v-for="(item, index) in deptList"
          :key="index"
          :value="item.fieldCode"
          :label="item.__config.label"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </div>
</template>
<script>
export default {
  name: "hmDeptSelect",

  data() {
    return {
      list: [],
    };
  },
  props: {
    value: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    deptList() {
      return this.value.deptList;
    },
  },
  created() {
    if (!this.value.__config.deptSelected) {
      this.$set(this.value.__config, "deptSelected", "");
    }
    if (!this.value.__config.deptRange) {
      this.$set(this.value.__config, "deptRange", false);
    }
  },
  watch:{
    "value.__config.deptRange": {
      handler(val) {
        if (val) {
          this.$set(this.value.__config, "treeWalker", false);
        }
      },
      immediate: true,
    },    
  },

  methods: {
    handleChange(value) {
      this.$set(this.value.__config, "deptSelected", value);
    },
  },
};
</script>
